<template>
    <view class="group-edit-container">
        <!-- 药品列表 -->
        <view class="medicine-list">
            <view class="medicine-item" v-for="(item, index) in addedMedicines" :key="index">
                <view class="medicine-info">
                    <view class="medicine-name">{{ item.name }}</view>
                    <uni-icons type="trash" size="20" color="#999" @click="deleteMedicine(index)"></uni-icons>
                </view>
            </view>
        </view>

        <!-- 底部按钮区域 -->
        <view class="bottom-buttons">
            <button class="cancel-btn" @click="handleCancel">取消保存</button>
            <button class="save-btn" @click="handleSave">保存组合</button>
        </view>

        <!-- 编辑组合名称的弹框 -->
        <uni-popup ref="editDialog" type="dialog">
            <view class="edit-dialog">
                <view class="dialog-title">编辑组合名称</view>
                <input
                    class="dialog-input"
                    v-model="groupName"
                    placeholder="请输入组合名称"
                />
                <view class="dialog-buttons">
                    <button class="dialog-btn cancel-btn" @click="closeEditDialog">取消</button>
                    <button class="dialog-btn confirm-btn" @click="confirmEditDialog">确定</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { useMedicineStore } from '../../store/medicine';
const medicineStore = useMedicineStore()

export default {
    setup(){
        return{
            medicineStore
        }
    },
    data() {
        return {
            addedMedicines: [], // 存储传递过来的药品信息
            groupName: '', // 组合名称
        };
    },
    onLoad(options) {
        // 解析传递的 addedMedicines
        if (options.addedMedicines) {
            this.addedMedicines = JSON.parse(decodeURIComponent(options.addedMedicines));
        }
        console.log('Added medicines:', this.addedMedicines);
    },
    methods: {
        // 删除药品
        deleteMedicine(index) {
            // 判断剩余列表数量是否少于两个
            if (this.addedMedicines.length <= 2) {
                uni.showToast({
                    title: '药品数量少于两个，不允许删除',
                    icon: 'none'
                });
                return;
            }

            uni.showModal({
                title: '提示',
                content: '确定要删除这个药品吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.addedMedicines.splice(index, 1); // 删除 addedMedicines 中的对应药品
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success',
                        });
                    }
                },
            });
        },

        // 处理取消保存
        handleCancel() {
            uni.navigateBack();
        },

        // 处理保存组合
        handleSave() {
            this.$refs.editDialog.open(); // 打开编辑组合名称的弹框
        },

        // 关闭编辑弹框
        closeEditDialog() {
            this.$refs.editDialog.close();
        },

        // 确认编辑弹框
        confirmEditDialog() {
            if (this.groupName.trim() === '') {
                uni.showToast({
                    title: '请输入组合名称',
                    icon: 'none',
                });
                return;
            }

            // 模拟保存组合逻辑
            const groupData = {
                categoryName: this.groupName,
                ids: this.addedMedicines.map(item => item.id).join(','), // 使用 addedMedicines 中的 id
            };
            medicineStore.saveDrugGroup(groupData)
            uni.showToast({
                title: '保存成功',
                icon: 'success',
            });

            setTimeout(() => {
                uni.navigateBack();
            }, 1500);
        },
    },
};
</script>

<style lang="scss">
.group-edit-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;

    .medicine-list {
        .medicine-item {
            background-color: #fff;
            border-radius: 12rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

            .medicine-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .medicine-name {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }

                .uni-icons {
                    cursor: pointer;
                }
            }
        }
    }

    .bottom-buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        background-color: #fff;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

        .cancel-btn,
        .save-btn {
            flex: 1;
            margin: 0 10rpx;
            border-radius: 8rpx;
            font-size: 28rpx;
        }

        .cancel-btn {
            background-color: #f8f8f8;
            color: #666;
            border: 1rpx solid #ddd;

            &:active {
                background-color: #e0e0e0;
            }
        }

        .save-btn {
            background-color: #2ac2d1;
            color: #fff;
            border: none;

            &:active {
                background-color: #24a8b5;
            }
        }
    }

    .edit-dialog {
        background-color: #fff;
        padding: 30rpx;
        border-radius: 12rpx;
        width: 600rpx;

        .dialog-title {
            font-size: 32rpx;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30rpx;
        }

        .dialog-input {
            border: 1rpx solid #ddd;
            border-radius: 8rpx;
            padding: 16rpx;
            margin-bottom: 30rpx;
            font-size: 28rpx;
        }

        .dialog-buttons {
            display: flex;
            justify-content: space-between;

            .dialog-btn {
                flex: 1;
                margin: 0 10rpx;
                border-radius: 8rpx;
                font-size: 28rpx;
            }

            .cancel-btn {
                background-color: #f8f8f8;
                color: #666;
                border: 1rpx solid #ddd;

                &:active {
                    background-color: #e0e0e0;
                }
            }

            .confirm-btn {
                background-color: #2ac2d1;
                color: #fff;
                border: none;

                &:active {
                    background-color: #24a8b5;
                }
            }
        }
    }
}
</style>